<template>
  <view>
    <view class="realname-box">
      <view class="realname-box-item">
        <view class="realname-box-item-title">
          <uni-easyinput v-model="realname" placeholder="请输入姓名" />
          <text class="realname-box-item-title-prefix">姓名：</text>
        </view>
      </view>
      <view class="realname-box-item">
        <view class="realname-box-item-title">
          <uni-easyinput v-model="idcard" placeholder="请输入身份证号"> </uni-easyinput>
          <text class="realname-box-item-title-prefix">身份证号：</text>
        </view>
      </view>
    </view>
    <view class="realname-box-waring"> 您也可直接上传身份证照片进行认证 </view>
    <view class="realname-box-upload">
      <view class="realname-box-upload-item">
        <view class="realname-box-upload-item-title">
          <text>身份证正面：</text>
        </view>
        <view class="realname-box-upload-item-img">
          <uni-file-picker
            v-model="imageValue"
            fileMediatype="image"
            :limit="1"
            style="width: 100%"
            mode="grid"
            @select="select"
            :auto-upload="false"
            delete
            :imageStyle="imageStyle"
          >
            <view class="realname-box-upload-item-img-btn">
              <image src="/static/images/upload.png" mode="widthFix"></image>
            </view>
          </uni-file-picker>
        </view>
      </view>
    </view>
    <view class="realname-box-upload-btn">
      <button type="primary" @click="submit">提交</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      realname: "", // 姓名
      idcard: "", // 身份证号
      imageValue: [], // 身份证正面图片
      imageValue2: [], // 预留，身份证反面图片
      imageStyle: {
        width: "100%", // 图片宽度
        height: "auto", // 图片高度
        border: {
          color: "#eee", // 边框颜色
          width: "1px", // 边框宽度
          style: "solid", // 边框样式
          radius: "10rpx", // 边框圆角
        },
      },
      isPicture: false, // 是否已通过图片认证
    };
  },
  methods: {
    // 提交实名认证信息
    submit() {
      // 校验姓名和身份证号是否填写
      if (!this.realname || !this.idcard) {
        uni.showToast({
          title: "请输入姓名和身份证号",
          icon: "none",
        });
        return;
      }
      // 如果已通过图片认证，直接返回上一页
      if (this.isPicture) {
        uni.navigateBack();
        return;
      }
      // 组装参数
      const params = {
        real_name: this.realname,
        real_id_card: this.idcard,
      };
      // 调用实名认证接口
      this.$api.post({
        url: "/user/user/realNameAuth",
        data: params,
        success: (res) => {
          if (res != null) {
            // 更新本地用户认证状态
            let user = uni.getStorageSync("xylease:user");
            user.is_auth = res.is_auth;
            uni.setStorageSync("xylease:user", user);
            uni.navigateBack();
          } else {
            uni.showToast({
              title: "实名认证失败",
              icon: "none",
            });
          }
        },
        fail: (err) => {
          uni.showToast({
            title: "实名认证失败",
            icon: "none",
          });
        },
      });
    },
    // 选择图片后回调
    select(e) {
      // 获取文件系统管理器
      const fs = wx.getFileSystemManager();
      // 读取选中的图片为base64格式
      fs.readFile({
        filePath: e.tempFilePaths[0],
        encoding: "base64",
        success: (res) => {
          const base64 = res.data;
          // 调用识别接口
          this.identify(base64);
        },
        fail: (err) => {
          uni.showToast({
            title: "识别失败",
            icon: "none",
          });
        },
      });
    },
    // 调用后端接口识别身份证信息
    identify(url) {
      this.$api.post({
        url: "/user/user/identify",
        data: {
          url: url,
        },
        success: (res) => {
          // 自动填充识别到的姓名和身份证号
          this.realname = res.realname || this.realname;
          this.idcard = res.idcard || this.idcard;
        },
        fail: (err) => {
          uni.showToast({
            title: "识别失败",
            icon: "none",
          });
        },
      });
    },
  },
};
</script>

<style lang="scss">
.realname-box {
  padding: 20rpx;
  .realname-box-item {
    margin-bottom: 20rpx;
    .realname-box-item-title {
      position: relative;
      .realname-box-item-title-prefix {
        position: absolute;
        left: 20rpx;
        top: 50%;
        transform: translateY(-50%);
        font-size: 28rpx;
        color: #000;
      }
    }
  }
}
.uni-easyinput > view {
  padding-left: 90px;
}
.realname-box-waring {
  text-align: center;
  color: #999;
  font-size: 28rpx;
  margin: 20rpx 0;
  line-height: 60rpx;
  color: #999;
}
.realname-box-upload {
  padding: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .realname-box-upload-item {
    width: 100%;
    .realname-box-upload-item-title {
      font-size: 28rpx;
      color: #000;
      margin-bottom: 20rpx;
      line-height: 60rpx;
    }
    .file-picker__box {
      width: 100% !important;
      height: 360rpx !important;
    }
    .realname-box-upload-item-img-btn {
      width: 20%;
      display: flex;
      justify-content: center;
    }
  }
}
.realname-box-upload-btn {
  margin-top: 20rpx;
  text-align: center;
  padding: 20rpx;
}
</style>
